<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4.cbo[60%] <<=- 3.tab[90%] <<=- 2.menu[50%] <<=- 1.idle[90%]</title>
<link href="../hc.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../hc.js"></script>
<script type="text/javascript" src="../idle.js"></script>
<script type="text/javascript" src="../menu.js"></script>
<script type="text/javascript" src="../tab.js"></script>
<script type="text/javascript" src="../cbo.js"></script>
<style type="text/css" title="">
html
{
padding:0 !important;
padding:58px 0 36px 0;
}
#bar
{
position:absolute;
top:0;
left:0;
width:100%;
height:26px;
}
#cmd{
position:absolute;
top:26px;
left:0;
width:100%;
height:32px;
}
#mid
{
position:absolute;
top:58px;
left:0;
right:0;
bottom:36px;
width:100%;
height:auto !important;
height:100%;
overflow:auto;
background:#f9f9f9;
}
#foot
{
position:absolute;
left:0;
bottom:0;
width:100%;
height:36px;
}
#credits
{
margin:2px;
background:#fafaff;
}
.mnu
{
background:url("ui/bg2.gif") repeat-x;
}
.nav
{
border-top:solid 1px #f9f9f9;
border-bottom:solid 1px #cde;
background:#f9f9f9;
}
#subm
{
top:200px;
left:200px;
width:200px;
}
.btn2
{
background:url("ui/bg2.gif") no-repeat;
}
.dv
{
width:601px;
}
#uf{
display:block;
width:16px;
height:16px;
background:url("icos/idle7.gif") -80px 1px no-repeat;
float:left;
}
</style>
</head>

<body>
<div id="bar">
</div>
<div id="cmd">
<ul class="nav">
	<li class="l"><span class="i"><img src="icos/45.png" class="ico" /><span class="t">file</span></span></li>
	<li class="zl">&nbsp;</li>
	<li class="l"><a href="#"><span class="t">new</span></a></li>
	<li class="l"><a href="#"><span class="t">edit</span></a></li>
	<li class="r"><a href="#"><span class="t">config</span><img src="icos/arr2.gif" class="m" style="padding:5px 0 0 3px;" /></a></li>
	<li class="zr">&nbsp;</li>
	<li class="r"><a href="#"><span class="t">settings</span></a></li>
</ul>
</div>
<div id="mid">
	<div style="width:480px;height:360px;background:#f9f9f9;" id="tab">
	</div>
	<div style="width:480px;height:360px;background:#f9f9f9;" id="ccc"><select id="sel"><option>a</option></select>
	<input type="text" id="inp" />
	<div id="cbo" style="width:120px;background:#f9f9f9;">
	</div>
	<div id="cups" style="width:140px;background:#f9f9f9;">
	</div>
	</div>
</div>
<div id="foot">
	<div id="credits">
		<span class="key">1</span>
		<span class="key">2</span>
		<span class="key">3</span>
	</div>
</div>
<script type="text/javascript">
//<![CDATA[
var mymnu=new menu$({id:'topmenu',elem:$('bar'),menu:[
	{cls:'l',css:'margin-left:3px;',a:{id:'hcg'},ico:{src:'icos/45.png',alt:'system'},
		dm:{src:'icos/arr2.gif',alt:'▼'},sub:'glob',fn:function(a){}},
	{txt:{txt:'-|-'},cls:'zl'},
	{cls:'l',css:'',a:{id:'ghome'},ico:{src:'icos/45.png',alt:''},
		txt:{txt:'home2'},key:'j',fn:function(){alert(this.id);}},
	{cls:'r',css:'margin-right:5px;',a:{id:'exit'},
		txt:{txt:'exit',cls:'u f_c'},sub:'exit',fn:function(){}},
	{cls:'r',a:{id:'help'},txt:{txt:'help',cls:'u f_c'},fn:function(){alert('help system');}},
	{txt:{txt:'-|-'},cls:'zr'},
	{cls:'r',a:{id:'acc',href:'idle.htm'},txt:{txt:'account'},fn:function(){alert('account setting');}},
	{cls:'r',txt:{id:'uf'},dm:{src:'icos/arr2.gif',alt:'▼'},fn:function(){alert('user status');}}
	],subs:{glob:[{ico:'icos/45.png',txt:'account settings',dm:'ui/arwrl.gif'},{txt:'-|-'},{txt:'exit',key:'x'}]}});
mymnu.init$();
var mytab=new tab$({elem:$('tab'),tabs:[
	{btn:{id:'general',cls:'a'},ico:{src:'icos/45.png',alt:'g'},txt:{txt:'general'},key:'g',data:'general',fn:function(){}},
	{btn:{id:'security'},ico:{src:'icos/45.png',alt:'s'},txt:{txt:'security'},key:'s',data:'security',fn:function(){}},
	{btn:{id:'customize'},ico:{src:'icos/45.png',alt:'c'},txt:{txt:'customize'},key:'c',data:'customize',fn:function(){}}
	],datas:{'general':'general content for the tab','security':'the security content here...','customize':'customize your settings'}});
mytab.init$();
var mycbo=new cbo$({elem:$('cbo'),'name':'cbo0',id:'cbo0',
	opts:[{val:'v1',txt:'opt1'},{val:'v2',txt:'opt2'},{val:'v3',txt:'opt3'},{val:'v4',txt:'opt4'},{val:'v5',txt:'opt5'},{val:'v6',txt:'opt6'},{val:'v7',txt:'opt7'},{val:'v8',txt:'opt8',cls:'a'},{val:'v9',txt:'opt9'},{val:'v10',txt:'opt10'},{val:'v11',txt:'opt11'},{val:'v12',txt:'opt12'},{val:'v13',txt:'opt13'},{val:'v14',txt:'opt14'},{val:'v15',txt:'opt15'},{val:'v16',txt:'opt16'},{val:'v17',txt:'opt17'},{val:'v18',txt:'opt18'},{val:'v19',txt:'opt19'},{val:'v20',txt:'opt20'},{val:'v21',txt:'opt21'},{val:'v22',txt:'opt22'},{val:'v23',txt:'opt23'},{val:'v24',txt:'opt24'},{val:'v25',txt:'opt25'},{val:'v26',txt:'opt26'},{val:'v27',txt:'opt27'},{val:'v28',txt:'opt28'},{val:'v29',txt:'opt29'},{val:'v30',txt:'opt30'}]});
mycbo.init$();
var mycbo2=new cbo$({elem:$('cups'),'name':'cups0',id:'cups0',opts:[{val:'v1',txt:'opt1'},{val:'v2',txt:'opt2'},{val:'v3',txt:'opt3'},{val:'v4',txt:'opt4'},{val:'v5',txt:'opt5',cls:'a'},{val:'v6',txt:'opt6'},{val:'v7',txt:'opt7'},{val:'v8',txt:'opt8'},{val:'v9',txt:'opt9'}]
});
mycbo2.init$();
var myol=new idle$({token:'token',user:'hc',module:'module',mdlid:'9999',locref:'locref'},'',{idle:function(a){if(!isNaN(a))$('uf').style.backgroundPosition=16*(1-a) +'px 1px';},timeout:function(){top.location.reload();}});
myol.ini=setInterval('myol.init$();',1000);
/* $('zz').onclick=function(){if(hcol&&hcol.remove$){clearInterval(hcol.ini);hcol.remove$();}}; */
//]]>
</script>
</body>
</html>
